<template>
  <view class="">
    姓名：{{name}} - {{age}}
    <scroll-view scroll-y ref="scroll">
      <view></view>
    </scroll-view>
    <navigator url="/pages/demo5/demo5">跳转到demo5</navigator>
    <view>-------------------------</view>
    <view>计数：{{count}}</view>
    <view>-------------------------</view>
    <navigator url="/pages/demo4/demo4" open-type="reLaunch">跳转到demo4</navigator>
    <view v-for="it in 100" :key="it">第{{it}}行</view>
    <view class="fixed" v-if="fixedShow">top</view>
  </view>
</template>

<script setup>
  import { ref, computed, onMounted, onBeforeMount } from 'vue'
  import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from '@dcloudio/uni-app'
  const name = ref('张三')
  const age = ref(18)
  const scroll = ref(null)
  const count = ref(0)
  const fixedShow = ref(false)
  onLoad(e => {
    console.log('onLoad函数', e)
    name.value = e.name
    age.value = e.age
  })

  let time = setInterval(() => {
    count.value++
  }, 50)

  onReady(() => {
    console.log('onReady函数', scroll.value)
  })

  onBeforeMount(() => {
    console.log('onBeforeMount函数')
  })
  onMounted(() => {
    console.log('onMounted函数')
  })

  onShow(() => {
    console.log('onShow函数')
    time = setInterval(() => {
      count.value++
    }, 50)
  })
  onHide(() => {
    console.log('onHide函数')
    clearInterval(time)
  })

  onUnload(() => {
    console.log('onUnload函数')
  })

  onPageScroll(e => {
    console.log('onPageScroll函数', e.scrollTop)
    fixedShow.value = e.scrollTop > 200
  })
</script>

<style lang="scss">
  .fixed {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: fixed;
    right: 30px;
    bottom: 30px;
  }
</style>